<template>
	<view class="main">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>
		<view class="public">
			<view class="public-tit">
				<view class="">
					基础信息
				</view>
				<view class="submit-box">
					<u-icon size="28" name="info-circle-fill" color="#CCA566"></u-icon>
					<text>提交后不能修改</text>
				</view>
			</view>
			<view class="container">
				<!-- 姓名 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">姓名</text>
						<input v-model="name" :disabled="true" placeholder="请输入姓名" @ class="input" />
					</view>
					<view class="error-box">
					</view>
				</view>
				<!-- 身份证号 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">身份证号</text>
						<input v-model="idCard" :disabled="true" placeholder="请输入身份证号" class="input" />
					</view>
					<view class="error-box">

					</view>


				</view>



				<!-- 出生年月日 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">出生日期</text>
						<input v-model="birthDate" class="input" />
					</view>
					<!-- <view class="error-box">
					</view> -->
				</view>
			</view>
		</view>
		<view class="public">
			<view class="public-tit">
				<view class="">
					其他信息
				</view>

			</view>
			<view class="container">





				<!-- 电话号码 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label label-color">电话号码</text>
						<input v-model="mobile" placeholder="请输入电话号码" @blur="validatePhone" class="input label-color" />
					</view>

				</view>
			</view>
		</view>


		<view class="btn-box">
			<button @click="submitForm" class="submit-btn">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		putPatient
	} from "@/service/api.js";
	import {
		toast,
		getStore,
		getDate,
		validateIdCard
	} from "@/utils";
	export default {
		data() {
			return {
				title: "修改资料",
				isgrey: false,
				name: '',
				iscard: 0,
				memberId: "",
				id: "",
				idCard: '',
				gender: '', // 自动识别的性别
				mobile: '',
				birthDate: "",
				nameError: '',
				idCardError: '',
				phoneError: '',
				cardid: "",
				cardinfo: {
					name: "绝地",
					card: 511322199811243038,
					gender: 1,
					phone: 15700232272,
				}

			}
		},
		onLoad(options) {
			if (options.cardinfo) {
				const cardinfo = JSON.parse(options.cardinfo)
				this.name = cardinfo.name;
				this.idCard = cardinfo.idCard;
				this.mobile = cardinfo.mobile;
				this.id = cardinfo.id;
				// 自动识别性别
				this.autoIdentifyGender();
				this.extractBirthDate()
			}

		},
		methods: {

			edit() {

			},




			extractBirthDate() {
				// 身份证号必须是18位
				if (this.idCard && this.idCard.length === 18) {
					const birthStr = this.idCard.slice(6, 14); // 获取第7位到14位的日期部分
					const year = birthStr.slice(0, 4); // 年
					const month = birthStr.slice(4, 6); // 月
					const day = birthStr.slice(6, 8); // 日

					// 格式化为 yyyy-MM-dd
					this.birthDate = `${year}-${month}-${day}`;
				} else {
					this.birthDate = ''; // 如果身份证号不合法，清空出生日期
				}
			},



			// 性别自动识别
			autoIdentifyGender() {
				if (this.idCard.length === 18) {
					const genderCode = parseInt(this.idCard[16]); // 取身份证号的第17位
					this.gender = genderCode % 2 === 0 ? '女' : '男'; // 偶数为女，奇数为男
				}
			},

			// 电话号码验证
			validatePhone() {
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!this.mobile) {
					this.phoneError = '电话号码不能为空';
					toast(this.phoneError)
				} else if (!phonePattern.test(this.mobile)) {
					this.phoneError = '电话号码格式不正确';
					toast(this.phoneError)
				} else {
					this.phoneError = '';
				}
			},



			// 提交表单
			async submitForm() {
				this.validatePhone();
				// 如果表单验证通过
				if (!this.phoneError) {
					this.info = JSON.parse(getStore("info")) || {};
					this.memberId = this.info.id;
					let res = await putPatient({
						mobile: this.mobile,
						memberId: this.memberId,
						id: this.id
					});
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: "/My/idCard/index"
							})
						},500)
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100vh;
		background: #F5F3F0;
		color: #B3B3B3;
	}

	.public {
		padding: 24rpx;
		margin: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 32rpx;
		color: #B3B3B3;

		.public-tit {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 24rpx;

			.submit-box {
				margin-left: 24rpx;
				font-size: 28rpx;
				color: #CCA566;
			}
		}

		.container {

			// padding: 20rpx;
			.form-item {
				border-bottom: 1rpx solid #E6E6E6;

				.input-box {
					display: flex;
					align-items: center;
				}

				margin-bottom: 24rpx;
			}

			.form-item:last-child {
				margin-bottom: 0;
				border: none;
			}

			.label {
				color: #B3B3B3;
				display: inline-block;
				width: 100rpx;
				font-size: 24rpx;
				margin-right: 48rpx;
			}

			.input {
				color: #B3B3B3;
				font-size: 24rpx;


			}

			.label-color {
				color: #1A1A1A;
			}
		}

		.error-box {
			height: 24rpx;
			display: flex;
		}

		.item-box {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding-bottom: 24rpx;

			.gender {
				display: flex;
				align-items: center;
			}

			.gender-label {
				display: inline-block;
				width: 48rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				margin-right: 15rpx;
				background: #F8F8F8;
				border-radius: 50%;

			}

			.highlight {
				font-weight: bold;
				background: #CCA566;
				color: #fff;

			}
		}


	}

	.btn-box {
		position: fixed;
		bottom: 0;
		background: #fff;
		padding-top: 24rpx;
		width: 100%;
		height: 130rpx;


		.submit-btn {
			width: 702rpx;
			margin: auto;
			height: 86rpx;
			line-height: 86rpx;
			background: #CCA566;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #fff;
			border-radius: 16rpx;
		}

		.btn-xiu {
			display: flex;
			justify-content: space-between;
			width: 702rpx;

			view {
				width: 339rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #CCA566;
				background: #fff;
				color: #CCA566;
			}

			view {
				background: #CCA566;
				color: #fff;
			}
		}

	}
	.title{
		background: #fff;
	}
</style>